<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .page-size {
            list-style: none;
            display: flex;
        }

        .page-size>li {
            width: 40px;
            height: 40px;
            background: #dedede;
            text-align: center;
            line-height: 40px;
            margin-right: 10px;
            color: blue;
        }

        .page-size>li.active {
            background: #4a6ef1;
            color: white;
        }
    </style>
</head>

<body>
    <ul id="page" class="page-size"></ul>
      

    <ul id="page2" class="page-size"></ul>
    <script>
        /*   
            POP编程:面向过程式编码，直接通过对业务理解完成功能的实现
            OOP编程:面向对象编程，将业务功能以构造函数的方式进行封装，使用是通过构建对象的方式进行调用 
        */

        let result={
            pageNums:10,
            currentPage:2
        };
        class PageView{
            _root=null;
            _pageNums=0;
            _currentPage=0;
            _changePage=function(){};
            constructor(options={}){
                this._root=document.querySelector(options.el);
                this._pageNums=options.data.pageNums;
                this._currentPage=options.data.currentPage;
                this._changePage=options.changePage;
                this.initPage();
            }

            //循环创建多少个页码
            initPage(){
                this._root.innerHTML="";
                for(let i=1;i<this._pageNums;i++){
                    let li=document.createElement("li");
                    li.innerHTML=i;
                    li.onclick=()=>{//箭头函数，将this指向于当前的实例对象
                        let activeLi=document.querySelector("li.active");//在点击对应的页码的时候，先查找是否已有actice类，如果有，进行删除
                        activeLi.classList.remove("active");
                        this._currentPage=i;//保存当前被点击的最新的页码
                        this._changePage(i);//调用自定义的方法，传递当前页码

                    };
                    if(i==this._currentPage){
                        li.classList.add("active");
                    }
                    this._root.appendChild(li);
                }
            }
            set pageNums(val){
                this._pageNums=val;
                this.initPage();
            }
          

        }
  
        let pageObj=new PageView({
            el:"#page",
            data:result,
            changePage:function(i){
                console.log(i);
                pageObj.pageNums=20;
            }
        });
        
       
    
       
    </script>
</body>

</html>